<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级元素和行内元素的转换</title>
    <style type="text/css">
    	.list li{
    		display: inline-block;
    		margin-right: 30px;
    		height: 50px;
    		border:1px solid gray;
    	}
    	a{
    		display: none;
    		border:1px dashed pink;
    	}
    </style>
</head>
<body>
    <ul class="list">
        <li><a href="#">栏目一</a></li>
        <li>栏目二</li>
        <li>栏目三</li>
        <li>栏目四</li>
        <li>栏目五</li>
    </ul>

    <ul>
        <li>栏目一</li>
        <li>栏目二</li>
        <li>栏目三</li>
        <li>栏目四</li>
        <li>栏目五</li>
    </ul>
    <a href="#">超链接1</a>
    <a href="#">超链接2</a>
    <a href="#">超链接3</a>
    <a href="#">超链接4</a>
    <a href="#">超链接5</a>
</body>
</html>